<template>
  <view class="container">
    <view class="header">
      <text class="title">录入成绩</text>
      <text class="subtitle">记录考试成绩</text>
    </view>
    
    <view class="main-content">
      <!-- 已添加成绩列表 -->
      <view v-if="scoreList.length > 0" class="score-list">
        <text class="list-title">已添加 {{ scoreList.length }} 个成绩</text>
        
        <view class="score-items">
          <view 
            v-for="(scoreItem, index) in scoreList" 
            :key="index" 
            class="score-item" 
          >
            <view class="item-content">
              <text class="subject-tag">{{ scoreItem.subject }}</text>
              <text class="score-value">{{ scoreItem.score }}分</text>
              <text class="exam-info">
                {{ scoreItem.examDate }} · {{ scoreItem.examName || '未命名考试' }}
              </text>
            </view>
            <Button 
              type="warn" 
              size="mini" 
              @click="removeScoreItem(index)"
              class="delete-btn"
            >
              删除
            </Button>
          </view>
        </view>
        
        <!-- 提交成绩按钮 -->
        <Button 
          class="submit-btn" 
          type="primary" 
          @click="submitScores"
          :loading="submitting"
        >
          提交所有成绩
        </Button>
      </view>
      
      <!-- 添加成绩按钮 -->
      <Button 
        class="add-score-btn"
        type="primary"
        @click="openAddModal"
        :disabled="availableSubjectCount <= 0"
      >
        <text v-if="availableSubjectCount > 0">+ 添加成绩</text>
        <text v-else>所有科目已添加</text>
      </Button>
      
        <!-- 提示信息 -->
        <view v-if="scoreList.length === 0 && availableSubjectCount > 0" class="empty-tip">
            <text>点击上方按钮开始添加成绩记录</text>
        </view>
    </view>
    
    <!-- 添加成绩弹窗 -->
    <uni-popup 
      ref="popup" 
      type="center" 
      @change="onPopupChange"
    >
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">添加成绩</text>
        </view>
        
        <view class="modal-body">
          <view class="form-group">
            <text class="label">选择科目</text>
            <picker 
              :range="availableSubjects()" 
              :value="tempScore.subjectIndex"
              @change="onSubjectChange"
              class="picker"
            >
              <view class="picker-content">
                {{ tempScore.subject || '请选择' }}
              </view>
            </picker>
          </view>
          
          <view class="form-group">
            <text class="label">考试分数</text>
            <view class="input-wrapper">
              <input 
                v-model.number="tempScore.score" 
                type="number" 
                placeholder="0-100" 
                class="input score-input"
                :class="{ 'invalid-input': tempScore.score !== null && (tempScore.score < 0 || tempScore.score > 100) }"
              />
              <text class="unit">分</text>
            </view>
          </view>
          
          <view class="form-group">
            <text class="label">考试时间</text>
            <picker mode="date" :value="tempScore.examDate" @change="onDateChange" class="picker">
              <view class="picker-content">
                {{ tempScore.examDate }}
              </view>
            </picker>
          </view>
          
          <view class="form-group">
            <text class="label">考试名称</text>
            <input 
              v-model="tempScore.examName" 
              type="text" 
              placeholder="如：单元测试" 
              class="input"
            />
          </view>
        </view>
        
        <view class="modal-footer">
          <Button 
            type="default" 
            @click="showAddModal = false"
            class="cancel-btn"
          >
            取消
          </Button>
          <Button 
            type="primary" 
            @click="confirmAddScore"
            :disabled="!canAddScore || addingScore"
            :loading="addingScore"
            class="confirm-btn"
          >
            确定添加
          </Button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 提交成功提示 -->
    <view v-if="showSuccessToast" class="success-toast">
      <text>提交成功!</text>
    </view>
  </view>
</template>

<script>
// 导入uni-popup组件
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'

export default {
  components: {
    uniPopup
  },
  
  data() {
    // 获取当前日期并格式化为 YYYY-MM-DD 格式
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    const formattedDate = `${year}-${month}-${day}`;
    
    return {
      subjects: ['数学', '语文', '英语', '物理', '化学', '生物', '历史', '地理', '政治'],
      scoreList: [], // 存储已添加的成绩列表
      showAddModal: false, // 控制添加成绩弹窗显示
      addingScore: false, // 添加成绩的加载状态
      submitting: false, // 提交成绩的加载状态
      showSuccessToast: false, // 提交成功提示
      
      // 临时存储弹窗中的成绩数据
      tempScore: {
        subject: '',
        subjectIndex: 0,
        score: null,
        examDate: formattedDate,
        examName: ''
      }
    };
  },
  
  computed: {
    // 检查是否可以添加成绩
    canAddScore() {
      return this.tempScore.subject && 
             this.tempScore.score !== null && 
             this.tempScore.score !== undefined && 
             this.tempScore.score !== '' && 
             this.tempScore.score >= 0 && 
             this.tempScore.score <= 100;
    },
    
    // 获取可用科目数量
    availableSubjectCount() {
      const selectedSubjects = this.scoreList.map(item => item.subject);
      return this.subjects.filter(subject => !selectedSubjects.includes(subject)).length;
    }
  },
  
  onLoad(options) {
    // 如果从学习目标详情页面传入了科目信息
    if (options.subject) {
      // 可以在这里处理预设科目逻辑
    }
  },
  
  methods: {
    // 获取可用科目列表
    availableSubjects() {
      const selectedSubjects = this.scoreList.map(item => item.subject);
      return this.subjects.filter(subject => !selectedSubjects.includes(subject));
    },
    
    // 更改科目
    onSubjectChange(e) {
      const subjectIndex = e.detail.value;
      const availableSubjects = this.availableSubjects();
      if (availableSubjects.length > 0) {
        this.tempScore.subject = availableSubjects[subjectIndex];
        this.tempScore.subjectIndex = subjectIndex;
      }
    },
    
    // 更改日期
    onDateChange(e) {
      this.tempScore.examDate = e.detail.value;
    },
    
    // 确认添加成绩
    confirmAddScore() {
      if (!this.canAddScore) {
        uni.showToast({
          title: '请检查输入信息',
          icon: 'none'
        });
        return;
      }
      
      this.addingScore = true;
      
      // 模拟异步操作
      setTimeout(() => {
        // 添加成绩到列表
        this.scoreList.push({
          subject: this.tempScore.subject,
          score: this.tempScore.score,
          examDate: this.tempScore.examDate,
          examName: this.tempScore.examName
        });
        
        // 关闭弹窗
        this.showAddModal = false;
        
        // 重置临时数据，准备下次添加
        this.resetTempScore();
        
        this.addingScore = false;
        
        // 显示添加成功提示
        uni.showToast({
          title: '添加成功',
          icon: 'success',
          duration: 1500
        });
      }, 300);
    },
    
    // 重置临时成绩数据
    resetTempScore() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      const formattedDate = `${year}-${month}-${day}`;
      
      this.tempScore = {
        subject: '',
        subjectIndex: 0,
        score: null,
        examDate: formattedDate,
        examName: ''
      };
    },
    
    // 删除成绩条目
    removeScoreItem(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个科目成绩吗？',
        success: (res) => {
          if (res.confirm) {
            this.scoreList.splice(index, 1);
          }
        }
      });
    },
    
    // 提交所有成绩
    submitScores() {
      if (this.scoreList.length === 0) {
        uni.showToast({
          title: '请先添加成绩',
          icon: 'none'
        });
        return;
      }
      
      // 显示提交状态
      this.submitting = true;
      
      // 模拟网络请求延迟
      setTimeout(() => {
        // 提交成绩逻辑
        console.log('提交所有成绩数据:', this.scoreList);
        
        // 显示成功动画
        this.showSuccessToast = true;
        
        // 1.5秒后隐藏成功提示并返回上一页
        setTimeout(() => {
          this.showSuccessToast = false;
          uni.navigateBack();
        }, 1500);
        
        this.submitting = false;
      }, 1000);
    },
    
     // 打开添加成绩弹窗
    openAddModal() {
      this.$refs.popup.open();
    },
    
    // 其他方法保持不变
    
    // 弹窗状态变化处理
    onPopupChange(e) {
      // 如果弹窗关闭了，重置临时数据
      if (!e.show) {
        this.resetTempScore();
      }
    }
   
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #F2F2F7;
  min-height: 100vh;
  position: relative;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  padding-top: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #8E8E93;
}

.main-content {
  max-width: 600rpx;
  margin: 0 auto;
}

.add-score-btn {
  width: 100%;
  font-size: 32rpx;
  padding: 20rpx 0;
  height: 60rpx;
  line-height: 40rpx;
}

.score-list {
  margin-bottom: 40rpx;
}

.list-title {
  display: block;
  font-size: 28rpx;
  color: #8E8E93;
  margin-bottom: 20rpx;
}

.score-items {
  margin-bottom: 30rpx;
}

.score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.item-content {
  flex: 1;
}

.subject-tag {
  display: inline-block;
  background-color: #007AFF;
  color: #FFFFFF;
  padding: 5rpx 20rpx;
  border-radius: 15rpx;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.score-value {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #000000;
  margin-bottom: 5rpx;
}

.exam-info {
  display: block;
  font-size: 24rpx;
  color: #8E8E93;
}

.delete-btn {
  font-size: 24rpx;
  padding: 8rpx 18rpx;
}

.submit-btn {
  width: 100%;
  font-size: 32rpx;
  padding: 20rpx 0;
  height: 60rpx;
  line-height: 40rpx;
}

.empty-tip {
  text-align: center;
  margin-top: 100rpx;
  padding: 40rpx;
  background-color: rgba(0, 122, 255, 0.05);
  border-radius: 12rpx;
}

.empty-tip text {
  font-size: 28rpx;
  color: #8E8E93;
}

/* 弹窗样式 */
.modal-content {
  width: 90%;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;
  padding: 30rpx;
}

.modal-header {
  text-align: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #F2F2F7;
  

}

.modal-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #000000;
}

.modal-body {
  padding: 30rpx;
}

.form-group {
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  display: block;
  font-size: 28rpx;
  color: #000000;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.picker {
  width: 100%;
}

.picker-content {
  padding: 20rpx;
  border: 1px solid #C7C7CC;
  border-radius: 12rpx;
  color: #000000;
  height: 50rpx;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  position: relative;
  font-size: 32rpx;
}

.picker-content::after {
  content: "";
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-top: 15rpx solid #8E8E93;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input {
  width: 100%;
  padding: 25rpx;
  border: 1px solid #C7C7CC;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #000000;
  box-sizing: border-box;
  height: 110rpx;
  background-color: #FFFFFF;
  transition: border-color 0.3s;
}

.input:focus {
  border-color: #007AFF;
  outline: none;
  box-shadow: 0 0 0 2rpx rgba(0, 122, 255, 0.1);
}

.score-input {
  padding-right: 60rpx;
}

.invalid-input {
  border-color: #FF3B30 !important;
  background-color: #FFF2F0 !important;
}

.unit {
  position: absolute;
  right: 20rpx;
  color: #8E8E93;
  font-size: 30rpx;
  pointer-events: none;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #F2F2F7;
  margin-top: 40rpx;
  padding-top: 30rpx;
}

.cancel-btn {
  flex: 1;
  font-size: 32rpx;
  border-radius: 12rpx;
  height: 50rpx;
  margin-right: 20rpx;
  background-color: #F2F2F7;
  border: none;
  color: #444343;
}

.confirm-btn {
  flex: 1;
  font-size: 32rpx;
  border-radius: 12rpx;
  height: 50rpx;
  margin-left: 20rpx;
  border: none;
}

/* 成功提示样式 */
.success-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(52, 199, 89, 0.9);
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 30rpx;
  z-index: 9999;
  animation: fadeInOut 1.5s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
</style>